<template>
	<div class="rollNumMain">
		<span class="rollNumMainNum">{{ ObjectNum.title }}</span>
		<ul>
			<!-- 需要显示6列 -->
			<li ref="li" v-for="i in 5" :key="i">
				<!-- 每列中的10行数字 -->
				<span v-for="num in 10" :key="num">{{ num - 1 }}</span>
			</li>
		</ul>
	</div>
</template>

<script>
export default {
	name: 'RollNum',
	components: {},
	props: {
		ObjectNum: {
			type: Object,
			default: () => ({
				num: 72345,
				title: '今日充电次数',
			}),
			required: true,
		},
	},
	computed: {},
	created() {
		setTimeout(() => {
			this.toOrderNum(this.ObjectNum.num, this.$refs.li);
		}, 500);
	},
	watch: {
		ObjectNum: {
			deep: true,
			// immediate: true,
			handler(val) {
				this.toOrderNum(val.num, this.$refs.li);
			},
		},
	},
	mounted() { },

	methods: {
		// 处理数字
		toOrderNum(num, el) {
			num = num.toString();
			// 把数变成字符串
			if (num.length < 5) {
				num = '0' + num; // 如未满八位数，添加"0"补位
				this.toOrderNum(num, el); // 递归添加"0"补位
			} else if (num.length === 5) {
				const numArr = num.split(''); // 将其便变成数据，渲染至滚动数组
				el.forEach((item, index) => {
					let ty = numArr[index];
					item.style.transform = `translate(0%, -${ty * 100}%)`;
				});
			} else {
				// this.$message.warning('数字过大，显示异常，请联系客服');
			}
		},
	},
};
</script>

<style scoped lang="less">
.rollNumMain {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;

	.rollNumMainNum {
		font-weight: 400;
		font-style: normal;
		font-size: 15px;
		margin-bottom: 5px;
		color: rgb(70, 166, 255);
	}
}

ul {
	display: flex;
	justify-content: center;
	overflow: hidden;

	li {
		width: 16px;
		height: 28px;
		flex-direction: column;
		transition: transform 1s ease-in-out;
		list-style-type: none;
		margin-left: 5px;

		span {
			text-align: center;
			background-color: #0465b8;
			font-family: electronicFont;
			font-size: 12px;
			display: inline-block;
			width: 100%;
			border-radius: 5px;
			height: 100%;
			display: -ms-flexbox;
			display: flex;
			-ms-flex-pack: center;
			justify-content: center;
			-ms-flex-align: center;
			align-items: center;
			font-size: 20px;
			font-weight: 600;
			color: white;
		}
	}
}

// @font-face {
//   font-family: electronicFont;
//   src: url(../assets/font/DS-DIGIT.TTF);
// }</style>
